<template>
	<view class="content">	
		<u-navbar :back-text-style="{color: '#fff'}" title-color="#fff" back-icon-color="#ffffff"
			back-icon-name="arrow-leftward" title="禾积分兑换" :background="NavBackgroud"
			></u-navbar>
		<view class="balance-wrap">
			<view class="balance">
				<view class="ba-l">
					<view class="b-l-t">禾积分</view>
					<view class="b-l-b">{{userInfo.token||0.000000000}} </view>
				</view>
				<view class="ba-r">
					<view class="b-r-t">估值（CNY）</view>
					<view class="b-r-b">≈{{Number(userInfo.token*currentPrice).toFixed(2)}}</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="swiper">
				<view class="filter-body-section-body style-flex style-flex-wrap" :style="{width:pwidth+'px'}">
					<axb-check-box ref="radio3" :list="TypeList" @change="radioChangeType"></axb-check-box>
				</view>
			</view>
			<view class="from">
				<view class="cu-form-group solid radiu margin-top">
					<input placeholder="请输入提现数量" v-model="convertToken" @input="changeValue"></input>
					<button class='cu-btn round sm' @click="allToken">全部</button>
				</view>
				<view class="f-text margin-top padding-lr">
					<view>实际到账 <text class="f-t-t">{{Math.max(0,(convertToken - Math.max(minFee, convertToken * exchangeRate/100)))}}</text></view>
					<view>手续费 <text class="f-t-t">{{Math.max(minFee, convertToken * exchangeRate/100)}}</text></view>
				</view>
			</view>
			<view class="text-btn">
				<text>
					为保障资金安全，当您账户安全策略变更、密码修改、我们会对提币进行人工审核，请耐心等待工作人员联系。请务必确认电脑及浏览器安全，防止信息被篡改或泄露。
				</text>
				<button type="primary" @click="convertAction">兑换</button>
			</view>
		</view>
	</view>
</template>

<script>
	import axbCheckBox from '@/components/axb-checkbox/axb-checkbox.vue'
	import uinput from "@/components/poiuy-uinput/uinput.vue"



	import {
		getConfig,
		getUserInfo,
		userActivity,
		getuserDalance,
		convert
	} from '@/api/user.js';

	import {
		mapGetters
	} from "vuex";

	import {
		toLogin
	} from '@/libs/login.js';

	import {
		chartIncrementTrendApi,
		currentTokenPrice
	} from '@/api/admin.js';

	let _self;

	export default {
		components: {
			axbCheckBox,
			uinput
		},	
		computed: mapGetters(['isLogin']),
		data() {
			return {
				TypeList: [{ // 开始日期
						name: 'Ant-20',
						value: '0',
						checked: 0
					},
					// {
					// 	name: 'TRC-20',
					// 	value: '1',
					// 	checked: 0
					// }, {
					// 	name: 'OMNI',
					// 	value: '2',
					// 	checked: 0
					// }, {
					// 	name: 'USDT',
					// 	value: '3',
					// 	checked: 0
					// },
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				pwidth: 400,
				userInfo: {},
				currentPrice: 1,
				exchangeRate: 0,
				minFee: 0,
				convertToken: null,				
			}
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.pwidth = res.windowWidth - 20
				}
			});
			console.log(this.pwidth)


			if (this.isLogin) {
				this.getUserInfo();
				this.getServerData();
				this.getBlockTxFeeConfig();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 				
			}
		},
		methods: {
			allToken(){
				this.convertToken = this.userInfo.token	
			},
			
			changeValue(event) {	
				console.log(event)
				if (Number(event.target.value) > Number(this.userInfo.token)) {
					this.convertToken = this.userInfo.token
				} else {
					this.convertToken = event.target.value
				}
			},

			getServerData() {
				currentTokenPrice().then(res => {
					console.log("current——price" + res.data)
					_self.currentPrice = res.data
				})
			},
			
			convertAction(){	
				//open loading
				
				if(this.userInfo.identityResult != 2){
					uni.showModal({
						title:'实名未通过，请先实名'
					})
					return
				}
				
				uni.showLoading({
					title:'积分兑换中'
				})
				
				let tokenNum = Math.max(0, (this.convertToken - Math.max(this.minFee, this.convertToken * this
						.exchangeRate / 100)));
							
				if(tokenNum<=0){
					uni.showModal({
						title:'实际到账token为0'
					})
					return
				}				
				convert({
					tokenNumber:tokenNum,
					tokenFee:Math.max(this.minFee, this.convertToken * this.exchangeRate/100)
				}).then(res=>{
					uni.hideLoading()
					console.log(res.data)
					if(res.data){
						//tips
						
						uni.showToast({
							title:'兑换成功',
							complete: () => {
								this.getUserInfo();
							}
						})
					}else{
						//tips
						uni.showToast({
							title:'兑换失败，联系管理员'
						})
					}
					//close loading
					
				}).catch(e=>{
					uni.hideLoading()
					uni.showToast({
						title:'兑换失败，稍后再试'
					})
				})
			},

			getBlockTxFeeConfig() {
				console.log("getBlockTxFeeConfig")
				
				getConfig("exchange_rate").then(res => {
					console.log("exchange_rate ")
					this.exchangeRate = res.data
				});

				getConfig("min_fee").then(res => {
					console.log("min_fee ")
					this.minFee = res.data
				})

			},

			radioChangeType() {},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},

			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
					that.rechargeSwitch = res.data.rechargeSwitch;
				});
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		font-size: 26rpx;
		background-color: #FFFFFF;
		height: 100vh;
	}

	.bottom {
		padding: 20rpx;
	}

	.logo {
		height: 80rpx;
		width: 80rpx;
	}

	.icon-text {
		padding-top: 50rpx;
		font-size: 26rpx;
		color: #9597a3;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tnum {
		width: 100%;
		position: relative;
	}

	.icon-text text {
		margin-left: 20rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.balance-wrap {
		/* margin-top: 50rpx; */
		height: 200rpx;
		background-color: #EEF5F7;
		display: flex;
		align-items: center;
	}

	.balance {
		text-align: center;
		width: 100%;
	}

	.swiper {
		/* margin-top: 50rpx; */
		width: 100%;
	}


	.ba-l {
		float: left;
		width: 50%;
		border-right: 4rpx solid #7d7d7d;
	}

	.from {
		width: 100%;
	}

	.b-l-t,
	.b-r-t {
		color: #9597a3;
		font-size: 26rpx;
	}

	.b-l-b,
	.b-r-b {
		color: #333333;
		font-weight: 600;
		font-size: 30rpx;
	}

	.ba-r {
		float: right;
		width: 49%;
	}

	.f-text {
		width: 100%;
		color: #7d7d7d;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.f-t-t {
		font-weight: 600;
		margin-left: 10rpx;
	}

	.text-btn {
		width: 100%;
		margin-top: 50rpx;
	}

	.text-btn text {
		font-size: 24rpx;
		line-height: 40rpx;
		color: #7d7d7d;
	}

	.text-btn button {
		margin-top: 50rpx;
		background-color: #2ebc84;
		line-height: 2.5;
	}

	.style-flex-wrap {
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		/* margin-top: 50rpx; */
	}

	.style-flex-wrap::-webkit-scrollbar {
		display: none
	}

	.tnum>.t2 {
		font-size: 26.0869upx;
		position: absolute;
		right: 21.7391upx;
		top: 18upx;
		color: #4f4f4f;
		padding-left: 21.7391upx;
	}

	.tnum>.t1 {
		font-size: 26.0869upx;
		position: absolute;
		right: 90upx;
		top: 18upx;
		color: #9597a3;
		padding-left: 21.7391upx;
	}

	.f-i-a {
		position: relative;
	}

	.f-i-a>.i1 {
		position: absolute;
		right: 65upx;
		top: 18upx;
		padding-left: 21.7391upx;
	}

	.f-i-a>.i2 {
		position: absolute;
		right: 21.7391upx;
		top: 18upx;
		padding-left: 21.7391upx;
	}
</style>
